<template>
  <div class="openbind">
    <keep-alive>
      <audio
        id="audio"
        preload="auto"
        :src="require('../assets/open.mp3')"
      ></audio>
    </keep-alive>
    <div class="MaskAll"></div>
    <div class="Notice" style="height: 220px">
      <Notice></Notice>
      <div>
        <swiperlistthree
          v-bind:swiperlistData="swiperlistData"
        ></swiperlistthree>
      </div>
    </div>
    <div class="circle_bjOr" v-if="changeMase"></div>
    <div v-if="boxdetalis.name" class="open-box">
      <div class="Rolling" v-if="Rolling">
        <div class="title">{{ boxdetalis.name }}</div>
        <div class="cent">
          <div v-if="boxdetalis.backgroundImage">
            <img :src="boxdetalis.backgroundImage" />
          </div>
          <div v-if="boxdetalis.image"><img :src="boxdetalis.image" /></div>
        </div>
        <div class="Droplist">
          <div>最近掉落</div>
          <ul>
            <li v-for="(item, index) in historylist.slice(0, 15)" :key="index">
              <div>
                <div><img :src="item.userImage" /></div>
                <span>{{ item.price }}</span>
              </div>
              <div>{{ item.skinName }}</div>
            </li>
          </ul>
        </div>
        <div class="choice-box">
          <ul>
            <li @click="getmoney(1)" :class="{ activs: activs == 1 }">
              <span>1</span>
            </li>
            <li @click="getmoney(2)" :class="{ activs: activs == 2 }">
              <span>2</span>
            </li>
            <li @click="getmoney(3)" :class="{ activs: activs == 3 }">
              <span>3</span>
            </li>
            <li @click="getmoney(4)" :class="{ activs: activs == 4 }">
              <span>4</span>
            </li>
            <li @click="getmoney(5)" :class="{ activs: activs == 5 }">
              <span>5</span>
            </li>
          </ul>
          <div class="openbind-btn">
            <div><img src="../assets/money-icon2.png" /></div>
            <div class="sates">{{ money }}</div>
            <div class="btnOpen" @click="start()">开箱</div>
          </div>
        </div>
      </div>
      <div class="Rolling-box" v-else>
        <img :src="boxIds.backgroundImg" class="imgBgbox"/>
        <div class="start1" v-if="start1">
          <Laofuji ref="mychild" :list="slots1" :positions="position"></Laofuji>
          <div class="centerline"><span></span><span></span></div>
        </div>
        <div class="start2s" v-if="start2s">
          <Laofutwo
            ref="mychilds"
            :list2="slots2"
            :positions="position"
          ></Laofutwo>
          <div class="centerline"><span></span><span></span></div>
        </div>

        <div class="circle-bj">
          <img v-if="activs == 1" class="img_icon" src="../assets/1.png" />
          <img v-else-if="activs == 2" class="img_icon" src="../assets/1.png" />
          <img v-else-if="activs == 3" class="img_icon" src="../assets/3.png" />
          <img v-else-if="activs == 4" class="img_icon" src="../assets/4.png" />
          <img v-else-if="activs == 5" class="img_icon" src="../assets/5.png" />
        </div>
      </div>
      <div class="dongs">
        <div class="pop-box" v-if="pop">
          <!-- 弹窗背景 -->
        </div>
        <transition name="mybox">
          <div class="pop" v-if="pop">
            <!-- 弹窗 -->
            <div class="cent">
              <div class="cent1">
                <div class="pop-prize">
                  <ul
                    :class="{
                      proSe01: activs == 1,
                      proSe02: activs == 2,
                      proSe03: activs == 3,
                      proSe04: activs == 4,
                      proSe05: activs == 5,
                    }"
                  >
                    <li
                      class="prize-list"
                      v-for="(item, index) in result"
                      :key="index"
                      :class="{
                        dongsOr01: activs == 1,
                        dongsOr02: activs == 2,
                        dongsOr03: activs == 3,
                        dongsOr04: activs == 4,
                        dongsOr05: activs == 5,
                      }"
                    >
                      <div
                        class="prize-bg"
                        :class="{
                          prizeBg01: activs == 1,
                          prizeBg02: activs == 2,
                          prizeBg03: activs == 3,
                          prizeBg04: activs == 4,
                          prizeBg05: activs == 5,
                        }"
                      ></div>
                      <div
                        :class="{
                          prize_text01: activs == 1,
                          prize_text02: activs == 2,
                          prize_text03: activs == 3,
                          prize_text04: activs == 4,
                          prize_text05: activs == 5,
                        }"
                      >
                        {{ item.skinName }}
                      </div>
                      <div class="prize_bg">
                        <img
                          :src="item.backgroundImg"
                          class="colorBgs"
                          :class="{
                            imgOks01: activs == 1,
                            imgOks02: activs == 2,
                            imgOks03: activs == 3,
                            imgOks04: activs == 4,
                            imgOks05: activs == 5,
                          }"
                        />
                        <img
                          :src="item.image"
                          :class="{
                            imgOr01: activs == 1,
                            imgOr02: activs == 2,
                            imgOr03: activs == 3,
                            imgOr04: activs == 4,
                            imgOr05: activs == 5,
                          }"
                        />
                      </div>
                      <div class="preize"></div>
                      <div
                        class="btn-list"
                        v-if="activs != 1 && result.length > 1"
                        :class="{
                          btnOr01: activs == 1,
                          btnOr02: activs == 2,
                          btnOr03: activs == 3,
                          btnOr04: activs == 4,
                          btnOr05: activs == 5,
                        }"
                      >
                        <div
                          class="btn-retrieve"
                          :class="{
                            Retrieve02: activs == 2,
                            Retrieve03: activs == 3,
                            Retrieve04: activs == 4,
                            Retrieve05: activs == 5,
                          }"
                          @click="handClickBut(index)"
                        >
                          取回
                        </div>
                        <div
                          class="btn-retrieve"
                          :class="{
                            recovery02: activs == 2,
                            recovery03: activs == 3,
                            recovery04: activs == 4,
                            recovery05: activs == 5,
                          }"
                          @click="handClickretrieve(index, item)"
                        >
                          回收&nbsp;&nbsp;
                          <img src="../assets/money-icon.png" />&nbsp;&nbsp;
                          <span class="color_text">{{
                            item.recoveryPrice
                          }}</span>
                        </div>
                      </div>
                      <!-- <div>回收 <div>
                          <img src="../assets/money-icon.png" ></div><span>{{item.recoveryPrice}}</span></div> -->
                    </li>
                  </ul>
                  <div class="btn">
                    <div @click="getknapsack(boxIds)">
                      <span v-if="this.activs != 1">全部</span>放入背包
                    </div>
                    <div @click="getrecovery(boxIds)">
                      <span v-if="this.activs != 1">全部</span>回收
                      <img src="../assets/money-icon.png" />
                      <span class="chileText">{{ total.toFixed(2) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div v-else class="open-box" style="padding-top: 50px">
      <img src="../assets/loding.gif" />
    </div>
    <div class="model-list">
      <div>
        <div>
          <div @click="getlist(1)" :class="{ active1: aclist == 1 }">
            物品列表
          </div>
          <div @click="getlist(2)" :class="{ active: aclist == 2 }">
            历史掉落
          </div>
        </div>
      </div>
      <div class="model-list-cent">
        <div class="probability" v-if="aclist == 1">
          <div v-for="(item, index) in rule" :key="index">
            <p></p>
            {{ item.probability }}%
          </div>
        </div>
        <ul v-if="aclist == 1">
          <li class="item" v-for="(item, index) in details" :key="index">
            <div class="dongheig">
              <img
                v-if="item.level == 0"
                src="../assets/color05.png"
              />
              <img
                v-if="item.level == 1"
                src="../assets/color04.png"
              />
              <img
                v-if="item.level == 2"
                src="../assets/color03.png"
              />
              <img
                v-if="item.level == 3"
                src="../assets/color02.png"
              />
              <img
                v-if="item.level == 4"
                src="../assets/color01.png"
              />
              <!-- 蓝色01，紫色02，粉色03，红色04，金色05 -->
              <span
                class="text_bels"
                :class="{
                  text_bels01: item.skinDetails.degree == '久经沙场',
                  text_bels02: item.skinDetails.degree == '崭新出厂',
                  text_bels03: item.skinDetails.degree == '略有磨损',
                  text_bels04: item.skinDetails.degree == '破损不堪',
                  text_bels05: item.skinDetails.degree == '战痕累累',
                }"
                >{{ item.skinDetails.degree }}</span
              >
            </div>
            <img :src="item.skinDetails.image" />
            <div class="parginBg">
              <div>
                <img src="../assets/money-icon.png" />
                <span>{{item.price}}</span>
                <div class="rightGlv">概率</div>
              </div>
              <div>
                {{ item.skinDetails.skinName }}
                <span v-if="item.skinDetails.degree"></span>
              </div>
            </div>
          </li>
        </ul>
        <div class="historylist" v-if="aclist == 2">
          <div>
            <p>掉落时间</p>
            <p>获得玩家</p>
            <p>道具</p>
            <p>六币</p>
          </div>
          <ul>
            <li v-for="(item, index) in historylist" :key="index">
              <div>{{ item.createTime }}</div>
              <div>
                <div><img :src="item.userImage" /></div>
                {{ item.userName }}
              </div>
              <div>
                <div><img :src="item.skinImage" /></div>
                {{ item.skinName }}
              </div>
              <div>{{ item.price }}</div>
            </li>
          </ul>
        </div>
        <div class="btn-box-jz">
          <div v-if="addlists" @click="addlist()">
            <img src="../assets/jzgd-icon.png" />
          </div>
          <div v-if="wholelists" @click="wholelist()">
            <img src="../assets/xsqb-icon.png" />
          </div>
        </div>
      </div>
    </div>
    <div class="staem_pop" v-if="staem_pop">
      <div>提示</div>
      <div>请先绑定steam交易链接！</div>
      <div @click="goto_steam()">去绑定</div>
    </div>
  </div>
</template>

<script>
import Bus from "../../config/bus.js";
import swiperlistthree from "../components/swiper-list-three.vue";
import Notice from "../components/notice.vue";
import Laofutwo from "../components/laofutwo.vue";
import Laofuji from "../components/laofuji.vue";
export default {
  components: {
    swiperlistthree, 
    Notice,
    Laofutwo,
    Laofuji,
  },
  data() {
    return {
      dongseg: {
        one: ["消费级", "工业级", "军规级", "普通级", "高级"],
        tow: ["受限", "卓越级", "奇异级"],
        three: ["保密"],
        four: ["大师级", "非凡", "隐秘"],
        five: ["违禁"],
      },
      changeMase: false,
      num_Url01: true,
      uniCong: false,
      swiperlistData: [1, 2, 3, 4, 5, 6, 7],
      money: "",
      Price: "",
      activs: 1,
      aclist: 1,
      pop: false,
      start1: false,
      start2s: false,
      Rolling: true,
      pageNum: 1,
      details: [],
      rule: [],
      id: "",
      historylist: [],
      boxdetalis: {},
      result: [],
      slots1: [],
      slots2: [],
      position: 10,
      total: 0,
      boxIds: "",
      pageSize: 10,
      staem_pop: false,
      wholelists: true,
      addlists: false,
      arrond: [],
      arrone: [],
      imgbgColor:{
        one:'../assets/colorBgs01.png',
        two:'../assets/colorBgs02.png',
        three:'../assets/colorBgs03.png',
        four:'../assets/colorBgs04.png',
        five:'../assets/colorBgs05.png',
      }
      // backgroundDiv:{
      //   backgroundImage:'url('+require('../assets/colorBgs01.png')+')'
      // }
    };
  },
  methods: {
    handClickretrieve(index, item) {
      var that = this;
      setTimeout(function () {
        console.log(that.arrond[index]);
        that.arrone.push(that.arrond[index]);
        that.arrond.splice(index, 1);
        that.$api.post(
          "/api/user/recovery",
          {
            ids: that.arrone,
          },
          (r) => {
            if (r.code == 200) {
              that.$confirm({
                type: "提示",
                time: "1",
                msg: "回收成功！",
              });
              var ints =
                Number(that.$store.state.user.money) +
                Number(item.recoveryPrice);
              var dd = ints.toFixed(2);
              that.$store.commit("signin_money", dd);
              that.result.splice(index, 1);
              let wed = Number(that.result.length);
              console.log(wed + "长度+++++");
              var div1 = document.querySelector(".prize-bg");
              var div2 = document.querySelector(".prize_bg");
              var div6 = document.querySelector(".btn");
              var div7 = document.getElementsByClassName("prize-bg");
              var div8 = document.getElementsByClassName("colorBgs");
              var div9 = document.getElementsByClassName("prize_text05");
              var div10 = document.querySelector(".prizeBg05");
              if (document.body.clientWidth <= 1500) {
                for (let i = 0; i < div7.length; i++) {
                  div7[i].style.cssText = "margin-top:60px";
                }
                div6.style.cssText = "margin-top:-42px";
              }
              if (wed == 1) {
                for (let i = 0; i < div8.length; i++) {
                  div8[0].style.cssText =
                    "width:100%;position:absolute;top:-104px;left:0;";
                }
              }
              if (wed == 2 && document.body.clientWidth <= 1550) {
                for (let i = 0; i < div8.length; i++) {
                  div8[i].style.cssText =
                    "width:100%;position:absolute;top:-79px;left:0;";
                }
                for (let j = 0; j < div9.length; j++) {
                  div9[j].style.cssText = "top:-72px;";
                }
              }

              if (wed == 1 && document.body.clientWidth <= 1500) {
                div6.style.cssText = "margin-top:60px";
                div1.style.cssText = "margin-top:10px";
                div1.style.width = "568px";
                div1.style.height = "464px";
                div10.style.cssText = "width:568px;height:464px;";
              }
              if (wed <= 1) {
                div1.style.width = "568px";
                div1.style.height = "500px";
                div2.style.width = "568px";
                var div3 = document.getElementsByClassName("imgOr05");
                for (let i = 0; i < div3.length; i++) {
                  div3[i].style.cssText = "padding-bottom:60px;";
                }
                // div2.style.margin
                div6.style.cssText = "margin-top:100px";
              }
              that.total = ss;
              // if(){

              // }
              that.arrone = [];
            }
          }
        );
        that.arrone = [];
      }, 100);
    },
    handClickBut(index) {
      var that = this;
      setTimeout(function () {
        that.result.splice(index, 1);
        let wed = Number(that.result.length);
        console.log(wed + "长度+++++");
        var div1 = document.querySelector(".prize-bg");
        var div2 = document.querySelector(".prize_bg");
        var div6 = document.querySelector(".btn");
        var div7 = document.getElementsByClassName("prize-bg");
        var div8 = document.getElementsByClassName("colorBgs");
        var div9 = document.getElementsByClassName("prize_text05");
        var div10 = document.querySelector(".prizeBg05");
        if (document.body.clientWidth <= 1500) {
          for (let i = 0; i < div7.length; i++) {
            div7[i].style.cssText = "margin-top:60px";
          }
          div6.style.cssText = "margin-top:-42px";
        }
        if (wed == 1) {
          for (let i = 0; i < div8.length; i++) {
            div8[0].style.cssText =
              "width:100%;position:absolute;top:-104px;left:0;";
          }
        }
        if (wed == 2 && document.body.clientWidth <= 1550) {
          for (let i = 0; i < div8.length; i++) {
            div8[i].style.cssText =
              "width:100%;position:absolute;top:-79px;left:0;";
          }
          for (let j = 0; j < div9.length; j++) {
            div9[j].style.cssText = "top:-72px;";
          }
        }

        if (wed == 1 && document.body.clientWidth <= 1500) {
          div6.style.cssText = "margin-top:60px";
          div1.style.cssText = "margin-top:10px";
          div1.style.width = "568px";
          div1.style.height = "464px";
          div10.style.cssText = "width:568px;height:464px;";
        }
        if (wed <= 1) {
          div1.style.width = "568px";
          div1.style.height = "500px";
          div2.style.width = "568px";
          var div3 = document.getElementsByClassName("imgOr05");
          for (let i = 0; i < div3.length; i++) {
            div3[i].style.cssText = "padding-bottom:60px;";
          }
          // div2.style.margin
          div6.style.cssText = "margin-top:100px";
        }
        let ss = 0;
        for (let i = 0; i < that.result.length; i++) {
          console.log(that.result[i].recoveryPrice + "*******************");
          ss = that.result[i].recoveryPrice + ss;
        }
        that.total = ss;
      }, 100);
    },
    goto_steam() {
      this.$router.push("/user");
    },
    addlist() {
      var k = this.aclist;
      this.pageNum++;
      this.pageSize = 10;
      if (k == 1) {
        this.get_details(this.id);
      } else {
        this.get_history(this.id);
      }
    },
    wholelist() {
      var k = this.aclist;
      this.pageSize = 9999;
      this.pageNum = 2;
      // this. details = [];
      this.get_details(this.id);
      this.wholelists = false;
      // if(k==1){
      //   this.get_details(this.id);
      // }else{
      //   this.get_history(this.id)
      // }
    },
    getmoney(e) {
      console.log();
      this.activs = e;
      this.money = parseFloat((e * this.Price).toFixed(2));
      if (this.activs == 1 || this.activs == 2 || this.activs == 3) {
        this.num_Url01 = true;
      } else if (this.activs == 4 || this.activs == 5) {
        this.num_Url01 = false;
      }
      console.log(this.num_Url01);
      let length = this.money.toString();
      console.log(length);
      if (length.length >= 7) {
        var div = document.querySelector(".sates");
        div.style.cssText = "font-size:10px";
      }
    },
    getlist(e) {
      this.pageSize = 10;
      this.aclist = e;
      this.pageNum = 1;
      this.details = [];
      this.historylist = [];
      this.get_details(this.id);
      this.get_history(this.id);
      if (e == 1) {
        this.wholelists = true;
        this.addlists = false;
      } else {
        this.addlists = true;
        this.wholelists = false;
      }
    },
    start() {
      this.$store.state.saveOr = false;
      var k = this.activs;
      var token = window.localStorage.getItem("token");
      if (token) {
        var steamStorehouseLink = this.$store.state.user.steamStorehouseLink;
        if (steamStorehouseLink) {
          this.getopen_list(k);
        } else {
          this.staem_pop = true;
          this.changeMase = true;
        }
      } else {
        Bus.$emit("get_login", event.target);
      }
      return;
    },
    getopen_list(e) {
      var k = this.activs;
      var animation = this.$store.state.user.animation;
      this.$api.post(
        "/api/blindBox/open",
        {
          boxId: this.id,
          num: e,
        },
        (r) => {
          this.changeMase = true;
          this.position = r.data.resultId;
          this.boxIds = r.data;
          this.slots1 = r.data.boxGoodsList;
          this.result = r.data.result;
          this.arrond = [];
          for (let i = 0; i < r.data.storehouseList.length; i++) {
            this.arrond.push(r.data.storehouseList[i].id);
          }
          console.log(this.arrond + "-------------");
          // if (r.data.boxGoodsList.length<=2) {
          //   this.slots1 = r.data.boxGoodsList;
          // } else{
          //   this.slots2 = r.data.boxGoodsList;
          // }
          this.result = r.data.result;
          var s = 0;
          for (var i = 0; i < this.result.length; i++) {
            s += this.result[i].recoveryPrice;
          }
          this.total = parseFloat(s.toFixed(2));
          if (animation == 0) {
            this.getstart1();
            // if(k<=2){
            //   this.getstart1()
            // }else{
            //   this.getstart2()
            // }
          } else {
            var soundEffects = this.$store.state.user.soundEffects;
            // if(soundEffects==0){
            //   let audio = document.getElementById("audio");
            //   audio.play();
            // }
            this.pop = true;
          }
        }
      );
    },
    getstart1() {
      var that = this;
      setTimeout(function () {
        var soundEffects = that.$store.state.user.soundEffects;
        let audio = document.getElementById("audio");
        audio.pause();
        audio.load();
        if (soundEffects == 0) {
          audio.play();
        }
      }, 0);
      this.start1 = true;
      console.log(this.$store.state.Max + "+++66666666666666");
      this.Rolling = false;
      setTimeout(function () {
        that.$refs.mychild.childFun();
      }, 100);
      setTimeout(function () {
        var ds = that.$store.state.Max;
        var thats = that;
        setTimeout(function () {
          thats.start1 = false;
          thats.Rolling = true;
          thats.pop = true;
          thats.changeMase = true;
          var thatss = thats;
          setTimeout(function () {
            var div6 = document.querySelector(".btn");
            var div7 = document.getElementsByClassName("prize-bg");
            let wed = Number(thatss.result.length);
            console.log(wed + "222222222222");
            if (document.body.clientWidth <= 1500) {
              for (let i = 0; i < div7.length; i++) {
                div7[i].style.cssText = "margin-top:60px";
              }
              div6.style.cssText = "margin-top:-42px";
              if (document.body.clientWidth <= 1500 && wed <= 2) {
                for (let j = 0; j < div7.length; j++) {
                  div7[j].style.cssText = "margin-top:16px;";
                }
                div6.style.cssText = "margin-top:80px";
              }
            }
          }, 100);
        }, ds);
      }, 500);
    },
    getstart2() {
      var that = this;
      this.start2s = true;
      this.Rolling = false;
      setTimeout(function () {
        that.$refs.mychilds.childFun();
      }, 100);
      setTimeout(function () {
        that.start2s = false;
        that.Rolling = true;
        var soundEffects = that.$store.state.user.soundEffects;
        if (soundEffects == 0) {
          let audio = document.getElementById("audio");
          audio.play();
        }
        that.pop = true;
      }, 3500);
    },
    getknapsack(e) {
      var that = this;
      setTimeout(function () {
        that.changeMase = false;
        that.pop = false;
        that.$store.state.saveOr = true;
      }, 100);
    },
    getrecovery(e) {
      var that = this;
      setTimeout(function () {
        that.$store.state.saveOr = true;
        that.$api.post(
          "/api/user/recovery",
          {
            ids: that.arrond,
          },
          (r) => {
            if (r.code == 200) {
              that.pop = false;

              that.changeMase = false;
              that.$confirm({
                type: "提示",
                time: "1",
                msg: "回收成功！",
              });
              var ints =
                Number(that.$store.state.user.money) + Number(that.total);
              var dd = ints.toFixed(2);
              that.$store.commit("signin_money", dd);
            }
          }
        );
      }, 100);
    },
    get_details(id) {
      this.$api.get(
        "/api/blindBox/details",
        {
          id: id,
          pageNum: this.pageNum,
          pageSize: 20,
        },
        (r) => {
          if (this.pageNum <= r.data.blindBoxDetailsList.totalPages) {
            this.details = this.details.concat(
              r.data.blindBoxDetailsList.content
            );
          }
          this.rule = JSON.parse(r.data.rule);
        }
      );
    },
    get_history(id) {
      this.$api.get(
        "/api/blindBox/history",
        {
          id: id,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
        (r) => {
          if (this.pageNum <= r.data.totalPages) {
            this.historylist = this.historylist.concat(r.data.content);
          }
        }
      );
    },
    get_boxId(id) {
      this.$api.get(
        "/api/blindBox/boxId",
        {
          id: id,
        },
        (r) => {
          if (r.code == 200) {
            this.boxdetalis = r.data;
            this.money = r.data.price;
            this.Price = r.data.price;
          }
        }
      );
    },
  },
  mounted() {
    this.$route.params.id;
    var id = this.$route.params.id;
    this.id = this.$route.params.id;
    console.log(this.$route.params.id + "++++++++.........+++++++++++");
    this.get_details(id);
    this.get_history(id);
    this.get_boxId(id);
    this.$nextTick(() => {
      this.$forceUpdate();
    });

    // setTimeout(function(){
    //   document.documentElement.scrollTop = 200;
    // },100)
  },
};
</script>

<style scoped>
.staem_pop {
  position: fixed;
  width: 300px;
  height: auto;
  background: rgba(0, 0, 0, 0.89);
  top: 100px;
  left: 50%;
  margin-left: -150px;
  z-index: 99999999;
  border-radius: 3px;
  overflow: hidden;
}
.staem_pop > div:first-child {
  width: 100%;
  height: 46px;
  line-height: 46px;
  font-size: 18px;
  background-color: #242a35;
  text-align: center;
  color: #ffa22a;
}
.staem_pop > div:nth-child(2) {
  font-size: 16px;
  padding: 30px 50px;
  text-align: center;
  background-color: #ffffff;
}
.staem_pop > div:nth-child(3) {
  width: 100%;
  height: 46px;
  line-height: 46px;
  font-size: 18px;
  background-color: #ffffff;
  text-align: center;
  cursor: pointer;
  border-top: 1px solid #ccc;
}

.mybox-leave-active,
.mybox-enter {
  transition: all 0.5s ease;
  transform: scale(0.01) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.mybox-leave,
.mybox-enter-active {
  transition: all 0.3s ease;
  transform: scale(1);
}
.start2s {
  position: relative;
  padding: 0px 0 35px;
}
.start2s .centerline {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background-color: #59c2fe;
  z-index: 999999;
}
.start1 {
  position: relative;
  padding: 30px 20px 35px;
  position: relative;
}

.start1 .centerline {
  position: absolute;
  width: 2px;
  height: 100%;
  left: 50%;
  margin-left: -1px;
  bottom: 0;
  background-color: #59c2fe;
  z-index: 999999;
}

.Rolling-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../assets/bg_cope.png) no-repeat;
  background-size: 130%;
  z-index: 99999;
}
.imgBgbox{
  width:700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pop .pop-prize .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  z-index: 99;
}
.pop .pop-prize .btn > div {
  width: 291px;
  height: 63px;
  margin: 0 25px;
  line-height: 42px;
  font-size: 22px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.pop .pop-prize .btn > div:first-child {
  width: 291px;
  height: 63px;
  background: #f9ba15;
  background-size: 100% 100%;
  color: #000000;
}
.pop .pop-prize .btn > div:nth-child(2) {
  width: 291px;
  height: 63px;
  background: #1062ae;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pop .pop-prize .btn > div:nth-child(2) img {
  margin: 0 5px 0 8px;
}
.pop .prize-list > div:nth-child(3) > span {
  color: #ffa32a;
  line-height: 20px;
}
.pop .prize-list > div:nth-child(3) > div {
  width: 19px;
  height: 19px;
  margin: 0 10px 0 15px;
}
.pop .prize-list > div:nth-child(3) {
  /* margin-top: 20px; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  line-height: 16px;
}
.pop .prize-list > div:nth-child(2) {
  margin-top: 22px;
  color: #ffffff;
  text-overflow: ellipsis;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  overflow: hidden;
  /* white-space:nowrap; */
  /* width: 300px; */
  margin: 20px auto 0;
}
.pop .prize-list > div:nth-child(2) {
  width: 100%;
  margin: 12px auto 0;
  max-height: 400px;
  /* background-color: #143650; */
  position: relative;
  top: -50px;
  left: 30px;
}
.colorBgs {
  width: 88%;
  position: absolute;
  top: -25px;
  left: 49px;
}
.pop .prize-list > div:nth-child(2) img {
  max-width: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.prize_bg {
  width: 100%;
  height: 100%;
  background-size: 100%;
  position: relative;
}

.circle-bj {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: 100%;
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -20px;
}
.circle_bjOr {
  position: absolute;
  top: -800px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 300vh;
  background: #000;
  opacity: 0.2;
  z-index: 9;
}
.circle_bjOr img {
  margin-left: 500px;
  margin-top: 200px;
}
.img_icon {
  width: 2800px;
  margin-top: -30px;
}
.pop .prize-list {
  height: 400px;
  /* background-color: #192A34; */
  flex: 1;
  /* box-sizing: border-box; */
  margin-top: -18px;
}

.prize-bg {
  width: 400px;
  height: 420px;
  position: absolute;
  top: -50px;
  z-index: 5;
}

.btn-retrieve {
  width: 202px;
  height: 37px;
  background: #0fa8ba;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 10px;
  font-size: 18px;
  border-radius: 2px;
  z-index: 99;
  cursor: pointer;
  white-space: nowrap;
}

.btn-list {
  display: flex;
  flex: 1;
  margin-top: -50px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  z-index: 2;
}
.chileText {
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffa32a;
}
.dongs {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.proSe01 {
  margin-left: 31px;
}
.proSe02 {
  margin-left: -23px;
}
.proSe03 {
  margin-left: -6px;
}
.proSe04 {
  margin-left: 22px;
}
.proSe05 {
  margin-left: 34px;
}
.dongsOr01 {
  width: 100%;
}
.dongsOr02 {
  width: 80%;
  margin: 0 80px;
}
.dongsOr03 {
  width: 76%;
  margin: 0 60px;
}
.dongsOr04 {
  width: 68%;
  margin: 0 30px;
}
.dongsOr05 {
  width: 60%;
  margin: 0 20px;
}

.imgOr01 {
  padding-bottom: 50px;
  width: 100%;
  z-index: 2;
}
.imgOr02 {
  padding-bottom: 105px;
  width: 100%;
  z-index: 2;
}
.imgOr03 {
  padding-bottom: 100px;
  width: 100%;
  z-index: 2;
}
.imgOr04 {
  padding-bottom: 130px;
  width: 100%;
  z-index: 2;
}
.imgOr05 {
  padding-bottom: 170px;
  width: 100%;
  z-index: 2;
}
.btnOr01 {
  margin-top: -50px;
  border-radius: 5px;
}
.btnOr02 {
  margin-top: -77px;
  border-radius: 5px;
}
.btnOr03 {
  margin-top: -90px;
  border-radius: 5px;
}
.btnOr04 {
  margin-top: -122px;
  border-radius: 5px;
}
.btnOr05 {
  margin-top: -158px;
  border-radius: 5px;
}
.Retrieve02 {
  width: 292px;
  height: 46px;
}
.Retrieve03 {
  width: 202px;
  height: 46px;
}
.Retrieve04 {
  width: 292px;
  height: 46px;
}
.Retrieve05 {
  width: 162px;
  height: 37px;
}

.recovery02 {
  width: 292px;
  height: 46px;
  z-index: 99;
}
.recovery03 {
  width: 202px;
  height: 46px;
  z-index: 99;
}
.recovery04 {
  width: 292px;
  height: 46px;
  z-index: 99;
}
.recovery05 {
  width: 180px;
  height: 37px;
  z-index: 99;
}
.prize_text01 {
  font-size: 20px;
}
.prize_text02 {
  font-size: 20px;
}
.prize_text03 {
  font-size: 20px;
}
.prize_text04 {
  font-size: 16px;
}
.prize_text05 {
  font-size: 16px;
}
.pop-prize > ul {
  width: 600px;
  display: flex;
  justify-content: center;
}
.MaskAll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.pop-prize {
}
.prizeBg01 {
  width: 610px;
  height: 470px;
}
.prizeBg01:hover {
  background: #fff4dc;
  opacity: 0.08;
  transform: scale(1.1);
}
.prizeBg02 {
  width: 520px;
  height: 470px;
}

.prizeBg02:hover {
  background: #fff4dc;
  opacity: 0.08;
  transform: scale(1.1);
}
.prizeBg03 {
  width: 460px;
  height: 460px;
}
.prizeBg03:hover {
  background: #fff4dc;
  opacity: 0.08;
  transform: scale(1.1);
}
.prizeBg04 {
  width: 420px;
  height: 422px;
}
.prizeBg04:hover {
  background: #fff4dc;
  opacity: 0.08;
  transform: scale(1.1);
}
.prizeBg05 {
  width: 363px;
  height: 377px;
}
.prizeBg05:hover {
  background: #fff4dc;
  opacity: 0.08;
  transform: scale(1.1);
}

.prize_text {
  font-size: 20px;
}
.pop-box {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(../assets/bg_cope.png) no-repeat;
  background-size: 133%;
  z-index: 9999;
}
.pop {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop .cent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 1200px;
  height: 733px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop .cent1 {
  max-width: 1200px;
  height: 733px;
  position: relative;
}
.pop .pop-mask {
  width: 100%;
  height: 100%;
}
.pop .pop-bg1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  animation: myfirst 1s infinite;
}
@keyframes myfirst {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.2);
  }
}
.openbind {
  width: 100%;
  max-width: 2600px;
  margin: 0 auto;
  background-color: #161a22;
}
.Notice {
  background: #12151b;
}
.open-box .Rolling {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.open-box {
  background-image: url(../assets/openbindbg.jpg);
  background-size: 100% 100%;
  /* max-width: 1920px; */
  min-width: 1200px;
  height: 772px;
  margin: 0 auto;
  position: relative;
  /* padding-top: 64px; */
}
.title {
  background-image: url(../assets/openbind-titlebg.png);
  background-size: 100% 100%;
  width: 223px;
  height: 55px;
  position: absolute;
  top: 55px;
  left: 0px;
  padding-left: 23px;
  color: #fff;
  font-size: 26px;
  line-height: 47px;
  text-align: left;
  box-sizing: border-box;
}
.open-box .cent {
  margin: 0px auto;
  width: 624px;
  height: 585px;
  position: relative;
}
.open-box .cent > div:first-child {
  width: 573px;
  height: 573px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.open-box .cent > div:nth-child(2) {
  width: 450px;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 63px;
  left: 50%;
  margin-left: -225px;
}
.open-box .cent > div:nth-child(2) img {
  width: 70%;
}
.open-box .cent > div:nth-child(3) {
  width: 284px;
  height: 284px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  margin-top: -142px;
  left: 50%;
  margin-left: -142px;
}
.open-box .cent > div:nth-child(3) img {
  width: 100%;
  height: 100%;
}
.open-box .cent > div:nth-child(4) {
  max-width: 341px;
  max-height: 341px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.open-box .cent > div:nth-child(4) img {
  width: 100%;
  height: 100%;
}
.Droplist {
  width: 211px;
  height: 406px;
  position: absolute;
  top: 85px;
  right: 0;
  background-image: url(../assets/Droplist-bg.png);
  background-size: 100% 100%;
  overflow: hidden;
}
.Droplist > div:first-child {
  font-size: 22px;
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  margin-top: 20px;
}
.Droplist ul {
  width: 190px;
  margin: 14px auto 0;
  height: 330px;
  overflow-y: scroll;
}
.Droplist ul li {
  background-color: #1f3342;
  height: 35px;
  width: 100%;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3px 0 3px;
  box-sizing: border-box;
}
.Droplist ul li > div:first-child {
  display: flex;
  align-items: center;
  color: #ffffff;
}
.Droplist ul li > div:first-child > div {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 8px;
  color: #ffffff;
}
.Droplist ul li > div:first-child > div img {
  width: 100%;
  height: 100%;
}
.Droplist ul li > div:first-child > span {
  font-size: 14px;
  color: #ffa22a;
}
.Droplist ul li > div:last-child {
  font-size: 14px;
  color: #59c2fe;
  width: 70px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.Droplist ul::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0 !important; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.Droplist ul::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.Droplist ul::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 4px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
}
.choice-box {
  width: 620px;
  margin: -25px auto 0;
  position: relative;
  z-index: 1;
}
.choice-box ul {
  display: flex;
  justify-content: center;
}
.choice-box ul li {
  width: 40px;
  height: 40px;
  border-radius: 25px;
  /* background-image: url(../assets/choice-box-bg.png); */
  background: #4f5356;
  background-size: 100% 100%;
  font-size: 21px;
  color: #fff;
  line-height: 45px;
  margin: 0 7px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.choice-box ul li:hover {
  transition: all 0.05s ease-in 0.05s;
  background: #f9ba15;
  color: #000000;
  font-weight: bold;
  cursor: pointer;
}
.choice-box ul .activs {
  /* background-image: url(../assets/choice-box-bgs.png); */
  background: #f9ba15;
  cursor: pointer;
  color: #000000;
  font-weight: bold;
}
.color_text {
  color: #ffa32a;
}
.choice-box ul li span {
  font-size: 24px;
}
.openbind-btn {
  margin: 34px auto;
  width: 240px;
  height: 48px;
  border: 1px solid #ffd200;
  padding: 0;
  border-radius: 28px;
  /* background-image: url(../assets/openbind-btn.png); */
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.openbind-btn > div:first-child {
  margin-left: 20px;
  margin-right: -12px;
  width: 22px;
  height: 22px;
}
.openbind-btn > div:first-child > img {
  width: 18px;
  height: 19px;
}
.openbind-btn > div:nth-child(2) {
  color: #ffa32a;
  font-size: 17px;
  line-height: 12px;
}
.openbind-btn > div:nth-child(3) {
  font-size: 20px;
  line-height: 24px;
}
.model-list {
  width: 100%;
}
.text_bels {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  line-height: 26px;
  padding: 0 8px;
  color: #ffffff;
}
.text_bels01 {
  background: #304973;
}
.text_bels02 {
  background: #02a634;
}
.text_bels03 {
  background: #0275a6;
}
.text_bels04 {
  background: #b7625f;
}
.text_bels05 {
  background: #993a38;
}
.model-list > div:first-child {
  width: 100%;
  display: flex;
  font-size: 16px;
  height: 49px;
  line-height: 49px;
  background-color: #222833;
}
.model-list > div:first-child > div:first-child {
  display: flex;
  align-items: center;
  width: 1200px;
  margin: 0 auto;
  line-height: 49px;
  background-color: #222833;
  color: #ffffff;
}
.model-list > div:first-child > div:first-child > div:first-child {
  width: 220px;
  height: 49px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: -220px 0;
  z-index: 2;
  background-image: url(../assets/bk-tal1-bgs.png);
  transition: all 0.5s;
}
.model-list > div:first-child > div:first-child > div:nth-child(2) {
  width: 221px;
  margin-left: -29px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: -221px 0;
  background-image: url(../assets/bk-tal2-bgs.png);
  transition: all 0.5s;
}
.model-list > div:first-child .active {
  background-image: url(../assets/bk-tal2-bgs.png);
  background-size: 100% 100%;
  height: 49px;
  color: #333333;
  background-position: 0px 0 !important;
}
.model-list > div:first-child .active1 {
  background-image: url(../assets/bk-tal1-bgs.png);
  width: 220px;
  height: 49px;
  background-size: 100% 100%;
  color: #333333;
  background-position: 0px 0 !important;
}
.model-list > div:first-child .active::after {
  display: none;
}
.model-list > div:first-child .active1::after {
  display: none;
}
.model-list > div:first-child > div:first-child > div:hover {
  color: #333333;
  background-image: url(../assets/bk-tal2-bgs.png);
  background-size: 100% 100%;
  transition: all 0.5s;
  background-position: 0px 0;
}
.model-list > div:first-child > div:first-child > div:first-child:hover {
  color: #333333;
  background-image: url(../assets/bk-tal1-bgs.png);
  background-size: 100% 100%;
  transition: all 0.5s;
  background-position: 0px 0;
}
.model-list > div:first-child > div:first-child > div:hover::after {
  display: none;
}
.model-list > div:first-child > div:first-child > div::after {
  position: absolute;
  top: -20px;
  right: 19px;
  bottom: -20px;
  content: "";
  width: 40px;
  background-color: #222833;
  transform: rotate(31deg);
}
.model-list
  > div:first-child
  > div:first-child
  > div:not(:first-child)::before {
  position: absolute;
  top: -20px;
  left: -19px;
  bottom: -20px;
  content: "";
  width: 40px;
  background-color: #222833;
  transform: rotate(31deg);
}
.model-list-cent {
  background-color: #12151b;
  padding: 23px 0px 50px;
  width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: 800px;
}
.model-list-cent .probability {
  display: flex;
  justify-content: end;
  align-items: center;
  font-size: 14px;
  width: 1112px;
  margin: 0 auto;
}
.model-list-cent .probability > div {
  margin-left: 30px;
  display: flex;
  align-items: center;
}
.model-list-cent .probability > div:first-child {
  color: #edb500;
}
.model-list-cent .probability > div:nth-child(2) {
  color: #a34b2a;
}
.model-list-cent .probability > div:nth-child(3) {
  color: #69267e;
}
.model-list-cent .probability > div:nth-child(4) {
  color: #8967e0;
}
.model-list-cent .probability > div:nth-child(5) {
  color: #2a5084;
}
.model-list-cent .probability > div:first-child > p {
  width: 4px;
  height: 16px;
  background-color: #edb500;
  margin-right: 5px;
}
.model-list-cent .probability > div:nth-child(2) > p {
  width: 4px;
  height: 16px;
  background-color: #a34b2a;
  margin-right: 5px;
}
.model-list-cent .probability > div:nth-child(3) > p {
  width: 4px;
  height: 16px;
  background-color: #69267e;
  margin-right: 5px;
}
.model-list-cent .probability > div:nth-child(4) > p {
  width: 4px;
  height: 16px;
  background-color: #8967e0;
  margin-right: 5px;
}
.model-list-cent .probability > div:nth-child(5) > p {
  width: 4px;
  height: 16px;
  background-color: #2a5084;
  margin-right: 5px;
}
.model-list-cent > ul {
  display: flex;
  flex-wrap: wrap;
  width: 1112px;
  margin: 25px auto 0;
  min-height: 300px;
}
.model-list-cent > ul li {
  width: 215px;
  height: 230px;
  margin-right: 9px;
  margin-bottom: 9px;
  position: relative;
  overflow: hidden;
}
.model-list-cent > ul li:nth-child(5n) {
  margin-right: 0px;
}
.model-list-cent > ul .item > img {
  position: absolute;
  top: 33%;
  left: 50%;
  width: 160px;
  height: 130px;
  transform: translate(-50%, -50%);
}
.parginBg {
  margin-top: 10px;
}
.dongheig {
  width: 217px;
  height: 151px;
}
.dongheig img {
  width: 100%;
  height: 100%;
}
.btnOpen {
  width: 145px;
  height: 50px;
  background: #f9ba15;
  border-radius: 28px;
  margin-right: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Adobe Heiti Std;
  font-weight: bold;
  color: #000000;
  float: right;
  font-size: 22px;
  cursor: pointer;
}
.btnOpen:hover {
  background: #f9d115;
}
.model-list-cent > ul .item > div > img {
}
.model-list-cent > ul .item > div > div:first-child {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #ffa32a;
  line-height: 12px;
}
.model-list-cent > ul .item > div > div:first-child img {
  width: 15px;
  height: 15px;
  margin-right: 4px;
}
.model-list-cent > ul .item > div > div:nth-child(2) {
  color: #ffffff;
  font-size: 14px;
  text-align: left;
  font-family: Adobe Heiti Std;
  width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.model-list-cent .btn-box-jz {
  margin: 30px auto;
  width: 174px;
  height: 60px;
}
.model-list-cent .btn-box-jz img {
  width: 100%;
}
.model-list-cent .btn-box-jz > div {
  margin-bottom: 15px;
  cursor: pointer;
}
.model-list-cent .historylist {
  width: 1182px !important;
  margin: 0 auto;
}
.model-list-cent .historylist > div {
  display: flex;
  background-color: #1f3750;
}
.model-list-cent .historylist > div > p {
  height: 53px;
  line-height: 53px;
  color: #59c2fe;
  font-size: 16px;
}
.model-list-cent .historylist > div > p:first-child {
  width: 25%;
}
.model-list-cent .historylist > div > p:nth-child(2) {
  width: 15%;
}
.model-list-cent .historylist > div > p:nth-child(3) {
  width: 40%;
  margin-right: 10%;
}
.model-list-cent .historylist > div > p:nth-child(4) {
  width: 10%;
}
.model-list-cent .historylist > ul {
  width: 100%;
  margin-top: 3px;
}
.model-list-cent .historylist > ul li {
  display: flex;
  align-items: center;
  height: 53px;
  line-height: 53px;
  background-color: #1f3342;
}
.model-list-cent .historylist > ul li:nth-child(2n) {
  background-color: #1a2530;
}
.model-list-cent .historylist > ul li > div {
  font-size: 14px;
  color: #59c2fe;
}
.model-list-cent .historylist > ul li > div:first-child {
  width: 25%;
}
.model-list-cent .historylist > ul li > div:nth-child(2) {
  width: 15%;
  display: flex;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.model-list-cent .historylist > ul li > div:nth-child(3) {
  width: 40%;
  margin-right: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.model-list-cent .historylist > ul li > div:nth-child(4) {
  width: 10%;
}
.model-list-cent .historylist > ul li > div:nth-child(2) > div {
  width: 31px;
  height: 31px;
  margin-right: 5px;
  border-radius: 50%;
  overflow: hidden;
}
.model-list-cent .historylist > ul li > div:nth-child(2) > div img {
  width: 100%;
  height: 100%;
}
.model-list-cent .historylist > ul li > div:nth-child(3) > div {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  position: relative;
}
.model-list-cent .historylist > ul li > div:nth-child(3) > div img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 32px;
  max-height: 32px;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
.rightGlv{
  position: absolute;
  right:0;
  color:#fff;
}

@media screen and (max-width: 2000px) {
  .imgOks01{
    top:-100px;
  }
  .dongsOr05 {
    width: 52%;
  }
  .Retrieve05 {
    font-size: 14px;
  }
  .recovery05 {
    font-size: 13px;
  }
  .Retrieve04 {
    font-size: 17px;
  }
  .recovery04 {
    font-size: 17px;
  }
  .prizeBg01 {
    width: 600px;
    height: 470px;
  }

  .prizeBg05 {
    width: 320px;
  }
  .prize_text05 {
    white-space: nowrap;
  }
  .prizeBg02 {
    width: 480px;
  }

  .dongsOr04 {
    width: 55%;
  }

  .prizeBg04 {
    width: 342px;
  }
  .prize_text04 {
    white-space: nowrap;
  }
}

@media screen and (max-width: 1610px) {
  .dongsOr05 {
    width: 45%;
  }

  .prizeBg05 {
    width: 270px;
  }
  .prize_text05 {
    white-space: nowrap;
  }

  .dongsOr04 {
    width: 55%;
  }

  .prizeBg04 {
    width: 342px;
    height: 410px;
    margin-top: 10px;
  }
  .prize_text04 {
    white-space: nowrap;
  }
  .dongsOr03 {
    width: 64%;
  }
  .prize_text03 {
    white-space: nowrap;
  }
  .btnOr03 {
    margin-top: -114px;
  }
  .imgOr03 {
    padding-bottom: 164px;
  }
  .prizeBg03 {
    width: 390px;
    height: 430px;
  }
  .prizeBg02 {
    width: 480px;
  }
  .Retrieve02 {
    font-size: 18px;
  }
  .recovery02 {
    font-size: 18px;
  }
  .Retrieve05 {
    font-size: 14px;
  }
  .recovery05 {
    font-size: 14px;
  }
}
@media screen and (max-width: 1550px) {
  .dongsOr05 {
    width: 40%;
  }
  .imgOr05 {
    padding-bottom: 250px;
  }
  .btn-retrieve {
    margin: 10px 5px;
  }
  .Retrieve05 {
    font-size: 14px;
  }
  .recovery05 {
    font-size: 14px;
  }

  .prizeBg05 {
    width: 240px;
    height: 310px;
  }
  .prize_text05 {
    white-space: nowrap;
  }

  .dongsOr04 {
    width: 55%;
  }
  .btnOr05 {
    margin-top: -230px;
    border-radius: 5px;
  }

  .prizeBg04 {
    width: 300px;
    height: 360px;
    margin-top: 1px;
  }
  .prize_text04 {
    white-space: nowrap;
  }
  .dongsOr04 {
    width: 50%;
  }
  .btnOr04 {
    margin-top: -174px;
  }
  .Retrieve04 {
    height: 40px;
  }
  .recovery04 {
    height: 40px;
  }
  .imgOr04 {
    padding-bottom: 216px;
  }
  .dongsOr03 {
    width: 54%;
  }
  .prize_text03 {
    white-space: nowrap;
  }
  .btnOr03 {
    margin-top: -166px;
  }
  .imgOr03 {
    padding-bottom: 197px;
  }
  .prizeBg03 {
    width: 330px;
    height: 390px;
    margin-top: 1px;
  }
  .dongsOr02 {
    width: 74%;
  }
  .prizeBg02 {
    width: 440px;
    height: 470px;
    margin-top: 1px;
  }
}
@media screen and (max-width: 1500px) {
  .imgOks01 {
    width: 88%;
    position: absolute;
    top: -82px;
    left: 49px;
  }
  .dongsOr05 {
    width: 39%;
  }
  .imgOr05 {
    padding-bottom: 264px;
  }
  .btn-retrieve {
    font-size: 13px;
    margin: 10px 5px;
  }
  .prizeBg05 {
    width: 250px;
    height: 300px;
  }
  .recovery05 {
    white-space: nowrap;
  }
  .prize_text05 {
    white-space: nowrap;
  }
  .btnOr05 {
    margin-top: -240px;
    border-radius: 5px;
  }
  .dongsOr04 {
    width: 41%;
  }
  .imgOr04 {
    padding-bottom: 219px;
  }
  .btnOr04 {
    margin-top: -212px;
  }
  .Retrieve04 {
    height: 40px;
  }
  .recovery04 {
    height: 40px;
  }
  .prizeBg04 {
    width: 260px;
    height: 320px;
    margin-top: 10px;
  }
  .dongsOr03 {
    width: 50%;
  }
  .imgOr03 {
    padding-bottom: 228px;
  }
  .btnOr03 {
    margin-top: -194px;
  }
  .pop .prize-list > div:nth-child(2) {
    white-space: nowrap;
  }
  .prizeBg03 {
    margin-top: 10px;
  }
  .prizeBg03 {
    width: 306px;
    height: 350px;
  }
  .dongsOr02 {
    width: 70%;
  }
  .imgOr02 {
    padding-bottom: 120px;
  }
  .btnOr02 {
    margin-top: -110px;
  }
  .prizeBg02 {
    margin-top: 10px;
  }

  .prizeBg02 {
    width: 420px;
    height: 440px;
  }
  .prizeBg01 {
    width: 600px;
    height: 470px;
  }
  .prize_text05 {
    font-size: 14px;
  }
}
</style>
